<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- ECharts单文件引入 -->
    <script src="./js/echarts.js"></script>
    <style>
        html,body { height:100%; width:100%; margin:0; padding:0;align:left;valign:left;}
    </style>
</head>
<body>
<div id="main"
     style="height:100%;width:100%;border:0px;text-align:left;align:left;valign:left;"></div>

<script type="text/javascript">
    //初始化路径
    var myChart;  
     require.config({
            paths: {
                echarts: './js'
            }
        });
    //  通用属性定义
    var options = {  
                title : {  
                    text : "Echart测试"  
                },  
                tooltip : {},
                toolbox : {  
                    show : true
                },
                legend: {
                    data:['温度']
                 },
            }; 


        //创建折线图
        function createLineChart(xdata,ydata){
        options = {
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : xdata
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'成交',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:ydata
             }
            ]
        };
    }

    //创建柱状图
        function createBarChart(xdata,ydata){
       options = {
            xAxis : [
                {
                    type : 'category',
                    data : xdata
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'成交',
                    type:'bar',
                    data:ydata

                }
            ]
        };
                    
    }

    //创建饼状图
        function createPieChart(ydata){
        options = {
        series : [
            {
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
        };
    }


        function createChart(chartKind,xdata,dataArray){
            if (chartKind=='line') {
                doCreatChart(createLineChart(xdata,dataArray));
            };
            if (chartKind=='bar') {
                doCreatChart(createBarChart(dataArray));
            };
            if (chartKind=='pie') {
                doCreatChart(createPieChart(dataArray));
            };


        }
    
        function doCreatChart(specificChartFunction){

            require(
            ['echarts','echarts/theme/macarons','echarts/chart/line',
            'echarts/chart/bar','echarts/chart/pie'
            ],
            function(ec,theme){
            myChart =ec.init(document.getElementById('main'),theme);
            myChart.showLoading({  
                text : "图表数据正在努力加载..."  
            }); 
            //specificChartFunction;
            myChart.setOption(options); //先把可选项注入myChart中  
            myChart.hideLoading(); 
            }
        );
        }

 
    //createChart('line',[89,78,77]);
    //createChart('bar',[89,78,77]);
    //createChart('pie',[89,78,77]);



</script>
</body>